<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
     
    <title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="400" height="320">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var data = new Array();
    for (var i = 0; i <= 50; i++) {
        if (i < 25) {
            var itemY = parseInt(Math.random() * 100);
        } else {
            var itemY = parseInt(Math.random() * 50);
        }
        if (i % 2 == 1) {
            var itemColor = 'rgba(213, 25, 37, 1)';
        } else {
            var itemColor = "#247F09";
        }
        var item = {x: i, y: itemY, color: itemColor};
        data[i] = item;
    }
    draw();

    function draw() {


        //9:30-11:30 2h  13:00-15:30 2.5h  270min
        //每一根量线 1  间隔0.5
        //上部 高 200


        ctx.beginPath();
        ctx.moveTo(0, 200);
        for (var i = 0; i <= 50; i++) {
            ctx.lineTo(data[i].x * 8, data[i].y);
        }
        ctx.lineTo(400, 200);
        ctx.closePath();
        ctx.fillStyle = 'rgba(253, 236, 236, 1)';
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(data[0].x * 8, data[0].y);
        for (var i = 0; i <= 50; i++) {
            ctx.lineTo(data[i].x * 8, data[i].y);
        }
        ctx.lineTo(400, 200);
        ctx.setLineDash([0.0000000001]);
        ctx.strokeStyle = 'rgba(213, 25, 37, 1)';
        ctx.stroke();

        for (var i = 0; i <= 50; i++) {
            ctx.beginPath();
            ctx.fillStyle = data[i].color;
            ctx.fillRect(8 * (i + 1), 320 - data[i].y, 4, data[i].y);
        }


        ctx.beginPath();
        ctx.strokeStyle = "#d3d3d3";
        ctx.strokeRect(0, 0, 400, 200);
        ctx.strokeRect(0, 220, 400, 100);

        ctx.setLineDash([5, 5]);
        ctx.moveTo(0, 50);
        ctx.lineTo(400, 50);
        ctx.moveTo(0, 100);
        ctx.lineTo(400, 100);
        ctx.moveTo(0, 150);
        ctx.lineTo(400, 150);
        ctx.moveTo(0, 270);
        ctx.lineTo(400, 270);
        //纵轴
        ctx.moveTo(100, 0);
        ctx.lineTo(100, 400);
        ctx.moveTo(200, 0);
        ctx.lineTo(200, 400);
        ctx.moveTo(300, 0);
        ctx.lineTo(300, 400);
        ctx.stroke();
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 200, 400, 20);

        ctx.beginPath();
        ctx.font = "13px Arial";
        ctx.fillStyle = 'rgba(213, 25, 37, 1)';
        ctx.fillText("3.70", 0, 15);
        ctx.fillText("10.00%", 350, 15);
        ctx.fillStyle = "#000";
        ctx.fillText("3.36", 0, 105);
        ctx.fillText("量：9231", 0, 230);
        ctx.fillText("2.56万", 360, 230);
        ctx.fillText("1.28万", 360, 280);
        ctx.fillStyle = "#247F09";
        ctx.fillText("3.02", 0, 195);
        ctx.fillText("-10.00%", 350, 195);
        ctx.fillStyle = "#d3d3d3";
        ctx.fillText("09:30", 0, 215);
        ctx.fillText("11:30", 160, 215);
        ctx.fillText("15:30", 360, 215);
    }

    ctx.lineWidth = 1;
    ctx.strokeStyle = "#000";
    var flag = false;

    $(document).ready(function () {
        //当鼠标按下时
        $("canvas").mousedown(function (e) {
            // alert("aa");
            var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
            var mouseY = e.pageY - this.offsetTop;//y
            flag = true;
            ctx.clearRect(0, 0, c.width, c.height);
            draw();
            ctx.beginPath();
            ctx.strokeStyle = "#000";
            ctx.setLineDash([0.0000000001]);
            ctx.moveTo(mouseX, 0);//起始位置
            ctx.lineTo(mouseX, 320);//终止位置
            ctx.stroke();//结束图形

            ctx.strokeRect(mouseX - 20, 180, 40, 20);
            ctx.fillStyle = "#fff";
            ctx.fillRect(mouseX - 20, 180, 40, 20);
            ctx.fillStyle = "#000";
            ctx.fillText("11:09", mouseX - 20, 190);


        });
        //当鼠标抬起时
        $("canvas").mouseup(function (e) {
            ctx.clearRect(0, 0, c.width, c.height);
            draw();
            flag = false;
        });
        //当鼠标移动时
        $("canvas").mousemove(function (e) {

            var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
            var mouseY = e.pageY - this.offsetTop;//y

            if (flag) {
                ctx.clearRect(0, 0, c.width, c.height);
                draw();
                ctx.beginPath();
                ctx.strokeStyle = "#000";
                ctx.setLineDash([0.0000000001]);
                ctx.moveTo(mouseX, 0);//起始位置
                ctx.lineTo(mouseX, 320);//终止位置
                ctx.stroke();//结束图形
                ctx.strokeRect(mouseX - 20, 180, 40, 20);
                ctx.fillStyle = "#fff";
                ctx.fillRect(mouseX - 20, 180, 40, 20);
                ctx.fillStyle = "#000";
                var time = mouseX + 1;
                ctx.fillText(time, mouseX - 20, 190);
                // ctx.lineTo(mouseX, mouseY);//终止位置
                // ctx.stroke();//结束图形
            }
        });
    });

</script>

</body>
</html>